<template>
  <dl class="tab-component-container">
    <dt>
      <a href="javascript:void(0)" @mouseenter="switchTab(0)" :class="activeIndex === 0 ? 'active' : ''">今日热点</a>
      <a href="javascript:void(0)" @mouseenter="switchTab(1)" :class="activeIndex === 1 ? 'active' : ''">实时热点</a>
      <a href="javascript:void(0)" @mouseenter="switchTab(2)" :class="activeIndex === 2 ? 'active' : ''">七日热点</a>
    </dt>
    <dd>
      <div class="content" v-if="activeIndex === 0">
        <h1>今日热点</h1>
      </div>
      <div class="content" v-if="activeIndex === 1">
        <h1>实时热点</h1>
      </div>
      <div class="content" v-if="activeIndex === 2">
        <h1>七日热点</h1>
      </div>
    </dd>
  </dl>
</template>

<script>
export default {
  name: 'TabComponent',
  data() {
    return {
      activeIndex: 0,
    }
  },
  methods: {
    switchTab(index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
$green-light: #20a2f7;
$height: 50px;

.tab-component-container {
  dt {
    height: $height;
    /*background: aquamarine;*/
    background: $green-light;
    display: flex;
    align-items: center;

    > a {
      color: blueviolet;
      margin: 0 1em;

      &.active {
        font-weight: bold;
        color: red;
        /*&::before {
          content: 'h';
        }*/
      }

      /*&::after {
        content: 'h';
      }*/
    }

    /*> a::before {
      content: 'h';
    }*/

    /*> a.active {
      font-weight: bold;
      color: red;
    }*/
  }

  dd {
    .content {
      padding: 1px;
      height: 200px;
      background: $green-light;
      border: 1px solid;
      /*display: none;*/

      &.show {
        display: block;
      }

      /*&:first-child {
        display: block;
      }*/
    }
  }
}
</style>